<!DOCTYPE html>
<html lang="en" xmlns:width="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="../echarts/jquery-3.3.1.js"></script>-->
    <script src="../echarts/jquery-3.3.1.js"></script>
    <script src="../echarts/echarts.min.js"></script>
    <script src="../bootstrap-4.1.3/js/bootstrap.bundle.js"></script>
    <script src="../bootstrap-4.1.3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap-4.1.3/css/bootstrap.css" type="text/css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
    <div class="col" id="110"  style="height:400px;">
    </div>
    <div class="col" style="background-color:orange;">.col</div>
    <div class="col" style="background-color:lavender;">.col</div>
</div>
    <h1>Hello World!</h1>
    <p>创建三个相等宽度的列! 尝试在 class="row" 的 div 中添加新的 class="col"  div，会显示四个等宽的列。</p>
    <div class="row">
        <div class="col" style="background-color:lavender;">.col</div>
        <div class="col" style="background-color:orange;">.col</div>
        <div class="col" style="background-color:lavender;">.col</div>
    </div>
</div>
<div id="msg"></div>
<input type="text" id="text">
<input type="submit" value="send" onclick="send()">
</body>
<script src="../js/index.js"></script>
<script type="text/javascript">
    var msg = document.getElementById("msg");
    var wsServer = 'ws://127.0.0.1:8080';
    var websocket = new WebSocket(wsServer);
    //监听连接打开
    websocket.onopen = function (evt) {
        msg.innerHTML = "The connection is open";
    };

    //监听服务器数据推送
    websocket.onmessage = function (evt) {
        msg.innerHTML += "<br>" + evt.data;
    };

    //监听连接关闭
    websocket.onclose = function (evt) {
        alert("连接关闭");
    };

    function send() {
        var text = document.getElementById("text").value
        websocket.send(text);
    }
</script>
</html>